<template>
  <div :class="['header-box','header-box-'+computedMode,$route.path === indexPath?'fix':'none']">
    <div class="logo menu-item">

    </div>
    <div>
      <SeniorInput placeholder="输入城市、大学或公寓名" class="header-search" v-show="mode==='dark'"></SeniorInput>
    </div>
    <div class="menu-item">
      <div @click="$router.push('/index/home')">首页</div>
    </div>
    <div class="menu-item">
      <TransButton style="width: 70px">发布房源</TransButton>
    </div>
    <div class="menu-item">
      <i class="el-icon-mobile-phone"></i>
      <span>APP</span>
    </div>

    <div class="menu-item">
      <sub-menu :list="rentMenuList">
        租房
        <template slot="icon" slot-scope="scope">
          <i :class="scope.item.icon" style="color: #4444"></i>
        </template>
        <template slot="content" slot-scope="scope">
          <div @click="handleClickRentChild(scope.item)">{{scope.item.name}}</div>
        </template>
      </sub-menu>
    </div>
    <div class="menu-item">
      <span>入学申请</span>
      <span style="background-color: #1a1a1a;padding: 5px;border-radius: 5px;color: white">beta</span>
    </div>
    <div class="menu-item">
      留学商城
    </div>
    <div class="menu-item" @click="$router.push('/login')">
      登录
    </div>
    <div class="menu-item">
      <sub-menu :list="helpMenuList">
        帮助
        <template slot="icon" slot-scope="scope">
          <i :class="scope.item.icon" style="color: #4444"></i>
        </template>
        <template slot="content" slot-scope="scope">
          {{scope.item.name}}
        </template>
      </sub-menu>
    </div>
    <div class="menu-item">
      <i class="el-icon-phone"></i>
    </div>
  </div>
</template>

<script>
import TransButton from "@/components/button/TransButton.vue";
import SubMenu from "@/components/menu/SubMenu.vue";
import SeniorInput from "@/components/input/SeniorInput.vue";

export default {
  name: "Header",
  components: {SeniorInput, SubMenu, TransButton},
  props:{
    mode:{
      type:String,
    }
  },
  data() {
    return {

      indexPath:"/index/home",
      rentMenuList:[
        {
          id:1,
          name:"团体租房",
          icon:"el-icon-phone"
        },
        {
          id:2,
          name:"留学生公寓",
          icon:"el-icon-s-home"
        }
      ],
      helpMenuList:[
        {
          id:1,
          name:"常见问题",
          icon:"el-icon-phone"
        },
        {
          id:2,
          name:"预定流程",
          icon:"el-icon-s-home"
        },
        {
          id:3,
          name:"联系我们",
          icon:"el-icon-s-home"
        },
      ]
    }
  },
  computed:{
    computedMode(){
      let path = this.$route.path;
      if(path === this.indexPath){
        return this.mode
      }else{
        return 'dark'
      }
    }
  },
  methods: {
    handleClickRentChild(item){
      console.log(item)
    }
  },
  watch:{

  },

}
</script>

<style scoped lang="less">
.header-box{
  width: 100%;
  height: 60px;
  //position: fixed;
  //left: 0;
  //top: 0;
  z-index: 10;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  transition: all 0.3s;


  .header-search{
    height: 45%;
    width: 300px;
    margin-right: 200px;
  }


  .logo {

  }

  .menu-item {
    width: fit-content;
    min-width: 60px;
    height: 100%;
    //边距
    padding: 0 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 15px;

    cursor: pointer;
    font-weight: 550;
    transition: all 0.3s;
    &:hover{


    }
    i{

      font-size: 16px;
      margin-right: 2px;
    }
  }
}

//光明
.header-box-light {

  background-color: transparent;

  .logo {

  }

  .menu-item {

    color: white;

    &:hover{

      color: #333333;
    }
    i{
      color: white;

    }
  }
}
//黑暗
.header-box-dark {

  background-color: #4C4C4C;

  .logo {

  }

  .menu-item {

    color: white;

    &:hover{

      color: #333333;
    }
    i{
      color: white;

    }
  }

}
.fix{
  position: fixed;
  top: 0;
  left: 0;
}
.none{

}
</style>